<template>
  <div
    class="portal-container"
  >
    <fks-input
      v-if="showSearch"
      v-model="searchValue"
      size
      clearable
      maxlength="50"
      class="search-input"
      :placeholder="LANG.SEARCH_PORTAl"
    >
      <fks-button
        slot="append"
        icon="fks-icon-search"
      />
    </fks-input>
    <div
      id="portal"
      :class="['content-portal',{'showSearch': showSearch}]"
    >
      <div
        v-for="(item, index) in portalList"
        :key="item.id"
        class="fun-portal-select"
      >
        <div
          :id="item.code"
          :class="[
            'fun-portal-select-type',
            {
              'fun-portal-select-active': selectedIndex == item.code
            }
          ]"
          tabindex="1"
          @click="changeCommonPortal(item, index)"
        >
          {{ item[$lang] }}
          <fks-icon
            class="svg-icon"
            icon-class="common"
          />
        </div>

        <div class="fun-portal-select-options">
          <div
            v-for="type in item.list"

            :id="type.id"
            :key="type.id"
            :class="[
              'fun-portal-select-options-item',
              {
                'fun-portal-select-active': selectedIndex == type.id
              }
            ]"
            tabindex="1"
            @click="changePortalMenu(type)"
          >
            <span class="portal-text">{{ type.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { UPDATE_AUTH_PORTAL } from '@/store/Mutation/mutationTypes'
import { ENUM, PORTALS } from '@/store/State/stateTypes'
import { AUTH_PORTAL } from '@/store/Getter/getterTypes.js'
export default{
  props:{
    showSearch:{
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      searchValue:'',
      selectedIndex:'',
      currentEditPotal:{}
    }
  },
  computed:{
    portalTypes() {
      return this.$store.state[ENUM].portalType || []
    },
    portals() {
      return this.$store.state[PORTALS]
    },
    portalList() {
      let portalList = []
      this.portalTypes.forEach((e) => {
        let arr = this.portals.filter((p) => {
          return p.type == e.code
        })
        if (arr && arr.length) {
          let portal = Object.assign({ list: arr }, e)
          portalList.push(portal)
        }
      })
      return this.filterPortal(portalList, this.searchValue) || []
    },
    authPortal(){
      return this.$store.getters[AUTH_PORTAL] || {}
    }
  },
  watch: {},
  mounted(){
    this.authPortal.portalId
      ? (this.selectedIndex = this.authPortal.portalId)
      : (this.selectedIndex = this.authPortal.type)
    this.$nextTick(() => {
      let selectdPortal = document.getElementById(this.selectedIndex)
      document
        .getElementById('portal')
        .scrollTo(
          0,
          selectdPortal.offsetTop - document.getElementById('portal').offsetTop
        )
    })
  },
  methods:{
    changeCommonPortal(commonPortal, index) {
      this.selectedIndex = commonPortal.code
      this.$store.commit(UPDATE_AUTH_PORTAL, { type: commonPortal.code })
      this.currentEditPotal = { type: commonPortal.code }
      this.$emit('refresh')
    },
    changePortalMenu(portal) {
      this.selectedIndex = portal.id
      this.$store.commit(UPDATE_AUTH_PORTAL, {
        type: portal.type,
        portalId: portal.id
      })
      this.currentEditPotal = { type: portal.type, portalId: portal.id }
      this.$emit('refresh')
    },
    filterPortal(list, val) {
      if (!val) return list
      return list.filter((item) => {
        if (item.list) {
          let arr = this.filterPortal(item.list, val)
          item.list = arr
          if (arr instanceof Array && arr.length > 0) {
            return true
          }
        }
        if (item.name && item.name.indexOf(val) != -1) {
          return true
        }
        if (item[this.$lang] && item[this.$lang].indexOf(val) != -1) {
          return true
        }
        return false
      })
    },
  }
}
</script>
<style lang="scss"  scoped>
@import '@/assets/css/variables.scss';
.portal-container{
  position: relative;
  height: 100%;
  .showSearch{
    top: 48px;
    height: calc(100% - 36px) !important
  }
  .content-portal {
    position: absolute;
    width: 100%;
    height: 100% ;
    overflow: scroll;

    .fun-portal-select {
      font-size: 14px;
      color: #191919;
      .svg-icon {
        width: 36px;
        height: 16px;
        margin-left: 4px;
        color: var(--theme-color);
      }
      &-title {
        padding: 0 0 8px;
        border-bottom: 1px solid #f2f3f4;
        font-weight: bold;
        text-align: center;
        color: #393e45;
      }
      &-active {
        background-color: mix(#ffffff, $theme, 90%) !important;
      }
      &-type {
        display: flex;
        align-items: center;
        height: 36px;
        padding-left: 24px;
        font-weight: 400;
        line-height: 36px;
        vertical-align: middle;
        cursor: pointer;
        &:hover {
          background-color: mix(#ffffff, $theme, 95%);
        }
      }
      &-options {
        &-item {
          position: relative;
          height: 36px;
          padding: 0 0 0 48px;
          overflow: hidden;
          font-weight: 400;
          line-height: 36px;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
          &:hover {
            background-color: mix(#ffffff, $theme, 95%);
          }
          &::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 30px;
            display: block;
            width: 2px;
            height: 120%;
            background-color: rgba(47, 83, 234, .08);
          }
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 32px;
            display: block;
            width: 8px;
            height: 2px;
            background-color: rgba(47, 83, 234, .08);
          }
          &:last-child::before {
            top: 0;
            height: calc(50% + 2px);
          }
        }
      }
    }
  }
}
</style>